<template>
    <div>
        <!-- 倪志文 -->
        <div id="main">
        <div id="left">
        <h4>5.0</h4>
        <p>综合评分</p>
        <p>高于周边商家96%</p>
        </div>
        <div id="right">
        <p>
            <span> 服务态度 </span>
            <span>
            <van-rate
                v-model="value1"
                :size="15"
                color="#ffd21e"
                void-icon="star"
                void-color="#eee"
                @change="onChange(value1)"
            />
            </span>
            <span>{{ value1 }}</span>
        </p>
        <p>
            <span> 菜品质量 </span>
            <span>
            <van-rate
                v-model="value2"
                :size="15"
                color="#ffd21e"
                void-icon="star"
                void-color="#eee"
                @change="onChange(value2)"
            />
            </span>
            <span>{{ value2 }}</span>
        </p>
        <p>
            <span>送达时间</span>
            <span>20分钟</span>
        </p>
        </div>
    </div>
    <div id="nav">
        <van-tabs v-model="activeName">
            <van-tab title="全部评论" to="/evaluation/all"></van-tab>
            <van-tab title="满意" to="/evaluation/Satisfied"></van-tab>
            <van-tab title="不满意" to="/evaluation/Unsatisfied"></van-tab>
        </van-tabs>
    </div>
        
        <router-view></router-view>
    </div>
</template>

<script lang="ts">
    import Vue from 'vue'
    export default Vue.extend({
        data() {
            return {
                activeName: 0, 
                value1: 0,
                value2: 0,
            }
        },
        methods: {
            onChange(value: number) {
                console.log(value);
            },
        },
    })
</script>

<style scoped>

</style>